<template>
    <div id="alpbet">
        <ul class="list">
            <li class="item" v-for="(item, index) in letters" :ref="item" :key="index" @click='handleletterclick' @touchstart.prevent='handletouchstart' @touchmove='handlemove' @touchend='handleend'>{{item}} </li>
        </ul>
    </div>
</template>
<script>
    export default {
        props: {
            'keys': Array
        },
        data() {
            return {
                tochstatue:false,
                starty:0,
                timer:''
            }
        },
        computed:{
            letters(){
                const letter =[]
                this.keys.forEach(element => {
                    letter.push(element)
                });
                return letter
            }
        },
        updated(){
            this.starty = this.$refs['A'][0].offsetTop
        },
        methods: {
            handleletterclick(e) {
                // console.log(e.target.innerText);
                this.$emit('change', e.target.innerText);
            },
            handletouchstart() {
                this.tochstatue=true
            },
            handlemove(e) {
                //函数截流
                if(this.timer){
                    clearTimeout(this.timer)
                }
                this.timer=setTimeout(()=>{
                    if(this.tochstatue){
                    const touchy = e.touches[0].clientY-79
                  
                    const index = Math.floor((touchy-this.starty)/20)
                    if(index>=0&&index<this.letters.length){
                        this.$emit('change',this.letters[index]);
                    }
                }
                },16)
                
            },
            handleend() {
                 this.tochstatue=false
            },
        }
    }
</script>
<style lang="stylus" scoped>
    @import "^~styles/varibles.styl"
    .list
        display flex
        flex-direction column
        justify-content center
        position absolute
        top 1.58rem
        right 0
        bottom 0
        width .4rem
        .item
            line-height .4rem
            text-align center
            color $bgColor
</style>
